<style lang="less" scoped>
@import "../../../assets/css/applyList.less";
</style>
<template>
    <div class="applyList delayList">
    <rui-page :defines="defines" :has-card-box="false">
        <!--查询条件-->
        <rui-query :label-width="120"
                   ref="delayListForm"
                   isApplyQuery
                   :query="queryData"
                   :query-rows="searchFormOptions"
                   :more-rows="searchMoreOptions">
        </rui-query>
        <div class="table-card">
            <div class="btn-status flex flex-between">
                <div class="loanApplyBtn">

                </div>
            </div>
        <rui-table
            :defineId="'delayListDefines'"
            :fixed-right="['action']"
            :showIndex="false"
            :select="false"
            :columns="delayListColumns"
            :slots="[{key:'action',slot:'action'},{key:'caContractBorrowerName',slot:'caContractBorrowerName'}]"
            @loadDatas="queryData"
            ref-query="delayListForm"
            ref="delayListTable"
            :border="false"
        >
            <!--实现操作选项显示方式：下拉菜单-->
            <template slot="action" slot-scope="{ row }" v-if="row.status=='1'">
                <Dropdown style="margin-left: 20px" trigger="click" :transfer="true" class="btn-no-border" transfer-class-name="dropdown-hover-bg">
                    <Button ghost type="primary">更多</Button>
                    <DropdownMenu slot="list">
                        <DropdownItem @click.native="edit(row)" size="small">编辑</DropdownItem>
                        <DropdownItem @click.native="deleteRow(row)" size="small">删除</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
            </template>
            <template  slot="caContractBorrowerName" slot-scope="{ row }">
                <a style="color:#3086eb;cursor: pointer;" @click.prevent="skipDetail(row)">
                    {{row.caContractBorrowerName}}
                </a>
            </template>
        </rui-table>
        </div>
    </rui-page>
    </div>
</template>

<script>

    import delayListDefines from "../../../api/post-loan-filing/delay-mng/delayListDefines";
    import {deleteDelay, getDelayList, submitDelayInfo} from "../../../api/post-loan-filing/delay-mng/delayListApi";
    import {deepClone} from "../../../../../libs/utils/ObjectClone";

    export default {
        name: 'delayList',
        mounted() {
            this.refresh();
            // window.skipDetail = this.skipDetail;
        },
        data() {
            return {
                editDelayListModalVisible: false,
                detailsDelayListModalVisible: false,
                editDelayListTitle: "编辑",
                detailsDelayListTitle: '详情',

                //查询条件
                searchFormOptions: [
                    {
                        defineId: "delayListDefines",
                        fields: ["key"],
                    },
                ],
                searchMoreOptions:[
                    {
                        defineId: "delayListDefines",
                        fields: [ "appDate", "delayFlage", "status",],
                    },
                ],

                //table显示
                delayListColumns: [
                    "caContractBorrowerName", "caContractNo","cdate","dtimes", "totalDays", "status", "delayFlage", "days", "reason", "refuseReason",  "action"
                ],

                //编辑显示字段
                delayListFormOptions: [
                    {
                        isGroup: false,
                        groupName: '延期申请信息编辑',
                        grids: [
                            {
                                defineId: "delayListDefines",
                                span: 8,
                                fields: ["caContractBorrowerName", "caContractNo", "totalDays"]
                            },
                            {
                                defineId: "delayListDefines",
                                span: 8,
                                fields: ["status", "delayFlage", "days",]
                            },
                        ]
                    }
                ],

                //详情
                detailsDelayListFormOptions: [
                    {
                        isGroup: false,
                        groupName: '延期申请信息详情',
                        grids: [
                            {
                                defineId: "delayListDefines",
                                span: 8,
                                fields: ["caContractBorrowerName", "caContractNo", "totalDays"]
                            },
                            {
                                defineId: "delayListDefines",
                                span: 8,
                                fields: ["status", "delayFlage", "days",]
                            },
                        ]
                    }
                ]
            }
        },
        methods: {
            //详情
            skipDetail(row) {
                row.op = "detail";
                this.afs.newTab(this, 'projects/afs-apply/pages/post-loan-filing/delay-mng/delayApply', '延期申请详情页面', 'ios-bookmark', row, 'delayApply-edit'+Math.random(), [], true);
            },
            //查询方法
            queryData(queryData) {
                console.info(JSON.stringify(queryData))
                getDelayList(queryData).then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        // console.info(JSON.stringify(res.data))
                        this.$refs.delayListTable.updateTableData(records, total);
                    }
                });
            },

            //刷新table
            refresh() {
                this.$refs['delayListTable'].reloadData();
            },
            //点击编辑跳转可编辑页面
            edit(row) {
                row.op = "edit";
                this.afs.newTab(this, 'projects/afs-apply/pages/post-loan-filing/delay-mng/delayApply', '延期申请编辑页面', 'ios-bookmark', row, 'delayApply-edit', [], true);
            },
            //删除
            deleteRow(row) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除 " + row.caContractBorrowerName + " ?",
                    onOk: () => {
                        // console.info(JSON.stringify(row))
                        deleteDelay(row).then(res => {
                            if (res.code === "0000") {
                                this.$Message.success("删除成功");
                                this.refresh();
                            }
                        }).catch(() => {
                            this.refresh();
                        });
                    }
                });
            },
        },

        computed: {
            defines() {
                return [{id: "delayListDefines", fields: delayListDefines}];
            }
        },
    }
</script>
